<script setup lang="ts">
import { reactive, ref } from "vue";
import { addHouse, addShops, getHouseList, getResidentialList, getUnitList } from "@/api/property";
import { ElNotification } from "element-plus";

defineOptions({
  name: "houseEdit"
});

const formData = reactive({
  id: null,
  residentialId: null,
  houseNumber: null,
  unitNumber: null,
  roomNumber: null,
  area: null
});
const resetForm = () => {
  formData.id = null;
  formData.residential_id = null;
  formData.address = null;
  formData.area = null;
};
const residentialList = ref();
const rules = {
  residential_id: [{ required: true, message: "归属小区不得为空", trigger: "blur" }],
  address: [{ required: true, message: "商铺地址不得为空", trigger: "blur" }],
  area: [{ required: true, message: "商铺面积不得为空", trigger: "blur" }]
};
const houseList = ref([]);
const unitList= ref([]);
//初始化数据
const onSearch = () => {
  getResidentialList().then(res => {
    residentialList.value = res.data.records;
  });
};
//添加
const add = () => {
  addHouse({ residentialId: formData.residentialId, houseNumber: formData.houseNumber,unitNumber:formData.unitNumber,roomNumber:formData.roomNumber, area: formData.area ,deliveryStatus:0}).then(res => {
    if (res.code === 200)
    ElNotification({
      title: "Success",
      message: res.msg,
      type: "success"
    });
    else
    ElNotification({
      title: "Error",
      message: res.msg,
      type: "error"
    });
  }).catch(res => {
    ElNotification({
      title: "Error",
      message: res.msg,
      type: "error"
    });
  });
};
const getHouse = () =>{
  getHouseList(formData.residentialId).then(res=>{
    houseList.value = res.data;
  })
}
const getUnit = () => {
  getUnitList(formData.residentialId+"/"+formData.houseNumber).then(res=>{
    unitList.value = res.data;
  })
}
onSearch();
</script>

<template>
  <div class="main-container">
    <el-row justify="center" :gutter="12">
      <el-col :span="12">
        <el-form
          ref="formRef"
          label-position="top"
          label-width="auto"
          :model="formData"
          style="max-width: 600px"
          :rules="rules"
        >
          <el-form-item label="归属小区" prop="residentialId">
            <el-select
              allow-create
              filterable
              v-model="formData.residentialId"
              placeholder="选择小区"
              @change="getHouse"
            >
              <el-option
                v-for="item in residentialList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="归属楼宇" prop="houseNumber">
            <el-select
              allow-create
              filterable
              v-model="formData.houseNumber"
              placeholder="选择楼宇"
              @change="getUnit"
            >
              <el-option
                v-for="item in houseList"
                :key="item.houseNumber"
                :label="item.houseNumber"
                :value="item.houseNumber"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="归属单元" prop="unitNumber">
            <el-select
              allow-create
              filterable
              v-model="formData.unitNumber"
              placeholder="选择单元"
            >
              <el-option
                v-for="item in unitList"
                :key="item.unitNumber"
                :label="item.unitNumber"
                :value="item.unitNumber"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="面积" prop="area">
            <el-input v-model="formData.area" />
          </el-form-item><el-form-item label="房间号" prop="roomNumber">
            <el-input v-model="formData.roomNumber" />
          </el-form-item>
          <el-form-item>
            <div style="text-align: center">
              <el-button type="primary" @click="add"
              >提交
              </el-button>
              <el-button @click="resetForm()">重置</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
</style>
